<template>
  <div class="n_cmd">
    <!-- 左边内容 -->
    <!-- 头部 -->
    <div class="head">
      <!-- 头部左边 -->
      <div class="h_r">
        <img src="./image/1.jpg" alt="" />
        <a href="javascript:;">全部歌单</a>

        <div>
          <ul class="h_r_li">
            <li v-for="(categories, index) in songList.categories" :key="index">
              <a>{{ categories }}</a> <span v-if="index < 4">|</span>
            </li>
          </ul>
        </div>
      </div>
      <!-- 头部右边 -->
      <div class="h_l">
        <a href="javascript:;">更多</a>
        <img src="./image/2.png" alt="" />
      </div>
    </div>

    <!-- 图片专区 -->
    <ul class="center_ul">
      <li
        class="center_li"
        @click="goPalyLists(songList.id)"
        v-for="(songList, index) in recommendsongList"
        :key="index"
      >
        <div class="b_img">
          <i class="ico"></i>
         <a> <img v-lazy="songList.picUrl" alt="" /></a>

          <div class="button">
            <span class="icon-l"></span>
            <span class="nb">{{ parseInt(songList.playCount / 10000) }}万</span>
            <a href="javascript:;" class="icon-play"></a>
          </div>
        </div>
        <div class="b_text">
          <a :title="songList.name">
            {{ songList.name }}
          </a>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  // name: "palyList",
  mounted() {
    // 请求全部歌单
    this.$store.dispatch("getSongList");
    // 请求推荐歌单 getRecommendSongList
    this.$store.dispatch("getRecommendSongList");
  },
  methods: {
    // 跳转到PlayLists页面
    goPalyLists(id){
        // console.log(id)
        this.$router.push(`/playlists?id=${id}`)
    }
  },
  computed: {
    ...mapState({
      songList: (state) => {
        return state.Home.songList || [];
      },
      // songName:(state)=>{return state.Home.songList.all.name || ''}
      recommendsongList: (state) => {
        return state.Home.recommendsongList || [];
      },
    }),
  },
};
</script>

<style lang="less" scoped>
a {
  color: #000;
}
.n_cmd {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;

  // 头部
  .head {
    // pa-top: 10px;
    margin: 0 auto;
    display: flex;
    min-width: 400px;
    justify-content: space-between;
    width: 689px;
    height: 35px;
    background-color: rgb(255, 255, 255);
    border-bottom: 2px red solid;
    .h_r {
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        height: 30px;
        width: 30px;
        line-height: 35px;
      }

      .h_r_li {
        // margin-right: 50px;
        padding-left: 15px;
        display: flex;
        span {
          margin: 0 10px;
        }
      }
    }
    .h_l {
      display: flex;
      justify-content: center;
      align-items: center;
      a {
        font-size: 10px;
      }
      img {
        height: 30px;
        width: 30px;
        line-height: 35px;
      }
    }
  }
  //   中间
  .center_ul {
    padding-top: 10px;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 20px;
    width: 689px;
    margin: 0 auto;
    display: flex;

    .center_li {
      width: 140px;
      height: 204px;

      .b_img {
        position: relative;

        .ico {
          display: inline-block;
          position: absolute;
          background: url("~@/assets/image/icon2.png");
          width: 40px;
          height: 40px;
          background-position: -135px -220px;
          top: 0;
          left: 0;
          z-index: 999;
        }
        img {
          width: 140px;
          height: 140px;
        }

        .button {
          position: absolute;
          //   position: relative;
          background: url("~@/assets/image/coverall.png");
          background-position: 0 -537px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          height: 27px;
          width: 100%;
          bottom: 3px;
          //   background: url("~@/assets/image/iconall.png");
          // top: -27px;
          color: #ccc;

          a {
            background: url("~@/assets/image/iconall.png");
            display: inline-block;
            position: absolute;
            right: 10px;
            bottom: 9px;
            width: 16px;
            height: 16px;
            background-position: 0 0;
          }
          a:hover {
            // color: rgb(255, 255, 255);
            background-position: 0 -60px;
          }
          .icon-l {
            // float: left;
            display: inline-block;
            background: url("~@/assets/image/iconall.png");
            width: 14px;
            height: 11px;
            background-position: 0 -24px;
            margin: 9px 5px 9px 10px;
          }
          .nb {
            display: inline-block;
            margin-right: 60px;
            font-size: 10px;
          }
        }
      }
      .b_text {
        a {
          font-size: 10px;
          line-height: 0;
        }
      }
    }
  }
}
</style>
